body{margin:0;padding:0;border:0;}

ul,ol{list-style-type:none;}

a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
tr{
    height: 42px;
}

#container{
    height: 1400px;
    width: 100%;
    /*background-color: cornsilk;*/
    /*margin-top:-51px;*/
}
#top{
    width: 100%;
    height: 70px;
    /*background-color: aquamarine;*/

}

#title span{
    display: block;
    font-size: 30px;
    font-family: PingFangSC-Semibold;
    width: 180px;
    height: 42px;
    line-height: 42px;
    /*background-color: purple;*/
    margin-top: 18px;
    margin-bottom: 14px;
    position: absolute;
    margin-left: 870px;
}
#left{
    width: 505px;
    height: 1310px;
    margin-left: 30px;
    /*background-color: cornflowerblue;*/
    float: left;

}
#left #laborStatistics,#laborDistribution,#incomingAndOutgoing,#perOptimizationSchedule{
    width: 505px;
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(4,34,62,0.20);
    margin-top: 20px;
    /*background-color: silver;*/
}

#left #laborStatistics{
    height: 277px;
}
.laborTitle,.disTitle,.inTitle,.outTitle,.perTitle,.attTitle,.volTitle,.capTitle,.costTitle,.traTitle
{
    margin-left: 28px;
    margin-top: 17px;
    position: absolute;
    font-size: 18px;
    color: #4E4E4E;
    font-weight: bold;
    font-family: PingFangSC-Medium;
    /*background-color: deeppink;*/
}

/*#left #laborStatistics #outgoing .outTitle{*/
/*    margin-left: 64px;*/
/*    margin-top: 57px;*/
/*    position: absolute;*/
/*    font-size: 18px;*/
/*    color: #4E4E4E;*/
/*    font-family: PingFangSC-Medium;*/
/*    background-color: deeppink;*/
/*}*/

#left #laborStatistics #laborChart{
    width: 505px;
    height:166px;
   margin-left: -135px;
    margin-top: 59px;
    position: absolute;


}
#left #laborDistribution{
    height: 213px;
}
#left #laborDistribution #selectGroup .selectOne{
    width: 138px;
    height: 20px;
    margin-top: 44px;
    position: absolute;
    float: left;
    margin-left: 215px;


}
#left #laborDistribution #selectGroup .selectOne text{
    font-family: PingFangSC-Regula;
    color: #000000;
    font-size: 14px;

}
#left #laborDistribution #selectGroup select{
    width: 77px;
    border-radius: 4px;
    background-color: #F6F8FF;
    border: none;

}
#left #laborDistribution #selectGroup .selectTwo{
    width: 138px;
    height: 20px;
    margin-top: 44px;
    position: absolute;
    float: left;
    font-size: 14px;

    margin-left: 358px;


}

#left #laborDistribution #disTable{
    width: 505px;
    height:126px;
    border:1px solid #EFEFEF;
    margin-top: 77px;
    position: absolute;
}
#left #laborDistribution #disTable table{
    width: 505px;
    height:126px;
    text-align: center;
    /*padding-top: 77px;*/
    font-family: PingFangSC-Regular;
    color: #4E4E4E;
    background-color: #FFFFFF;

}

#left #laborDistribution #disTable table tr td{
    width: 28px;
    height: 20px;
}
/*#left #laborDistribution .disTitle{*/
/*    width: 126px;*/
/*    height: 25px;*/
/*    margin-left: 59px;*/
/*    margin-top: 17px;*/
/*    position: absolute;*/
/*    font-size: 18px;*/
/*    color: #4E4E4E;*/
/*    font-family: PingFangSC-Medium;*/
/*    background-color: deeppink;*/
/*}*/
#left #incomingAndOutgoing{
    height: 276px;
}
#left #incomingAndOutgoing #incoming .cumulative{
    width: 80px;
    height: 20px;
    color: #4E4E40;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    margin-left:419px;
    margin-top: 21px;
    position: absolute;
}
#left #incomingAndOutgoing #incoming #newTable{
    width: 505px;
    height:84px;
    margin-top: 60px;
    position: absolute;

}
#left #incomingAndOutgoing #incoming #newTable table{
    width: 505px;
    height:84px;
    text-align: center;
    /*padding-top: 77px;*/
    font-family: PingFangSC-Regular;
    color: #4E4E4E;
    background-color: #FFFFFF;

}
#left #incomingAndOutgoing #outgoing #exitTable{
    width: 505px;
    height:84px;
    margin-top: 190px;
    position: absolute;

}

#left #incomingAndOutgoing #outgoing #exitTable table{
    width: 505px;
    height:84px;
    text-align: center;
    /*padding-top: 77px;*/
    font-family: PingFangSC-Regular;
    color: #4E4E4E;
    background-color: #FFFFFF;

}
#left #perOptimizationSchedule{
    height: 410px;
}
#left #perOptimizationSchedule .perCumulative{
    width: 80px;
    height: 20px;
    color: #4E4E40;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    margin-left:419px;
    margin-top: 21px;
    position: absolute;
}
#left #perOptimizationSchedule #perChart{
    width: 505px;
    height:410px;
    margin-top: 16px;
    position: absolute;


}
#middle{
    width: 804px;
    height: 1310px;
    /*background-color: slateblue;*/
    margin-left: 560px;
    position: absolute;

}

#middle #attendanceStatistics,#voluntaryLaborAttendanceRate,#perCapitaSteelProducing,#costStatistics{
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(4,34,62,0.20);
    /*background-color: darkkhaki;*/
    margin-top: 20px;
}
#middle #attendanceStatistics{
    width: 802px;
    height: 201px;
}
#middle #attendanceStatistics #attTable{
    width: 802px;
    height:150px;
  margin-top: 50px;
    position: absolute;

}
#middle #attendanceStatistics #attTable table{
    width: 802px;
    height:150px;

    background-color: #FFFFFF;
}
#middle #attendanceStatistics #attTable table tr td{
    text-align: center;
    /*padding-top: 77px;*/
    font-family: PingFangSC;
    color: #4E4E4E;
    font-size: 18px;
}
#middle #voluntaryLaborAttendanceRate{
    width: 804px;
    height: 288px;
}
#middle #voluntaryLaborAttendanceRate #volRate{
    width: 402px;
    height: 288px;
    /*background-color: darkorange;*/
    float: left;
}
#middle #voluntaryLaborAttendanceRate #volRate .volRateDate{
    width: 15px;
    height: 14px;
    color: #272727;
    margin-left: 186px;
    margin-top: 40px;

}
#middle #voluntaryLaborAttendanceRate #volRate #volRateDatePicker{
    width: 175px;
    height: 15px;
    border: none;
    border-radius: 2px;
    padding-left: 12px;
    margin-top: 38px;
    position: absolute;
    margin-left: 8px;
    z-index: 1001;
}
#middle #voluntaryLaborAttendanceRate #volRate #volRateChart{
    width: 402px;
    height: 288px;
    margin-top: -20px;
    position: absolute;
    margin-left: 10px;
}

#middle #voluntaryLaborAttendanceRate #volCount #volCountChart{
    width: 402px;
    height: 288px;
    margin-top: -20px;
    margin-left: 10px;
    position: absolute;

}

#middle #voluntaryLaborAttendanceRate #volCount .volCountDate{
    width: 15px;
    height: 14px;
    color: #272727;
    margin-left: 186px;
    margin-top: 40px;

}
#middle #voluntaryLaborAttendanceRate #volCount #volCountDatePicker{
    width: 175px;
    height: 15px;
    border: none;
    border-radius: 2px;
    padding-left: 12px;
    margin-top: 38px;
    position: absolute;
    margin-left: 4px;
    z-index: 1001;
}

#middle #voluntaryLaborAttendanceRate #volCount{
    width: 402px;
    height: 288px;
    /*background-color: darkcyan;*/
    margin-left: 396px;
}

#middle #voluntaryLaborAttendanceRate #volCount .volTitleCount{
    margin-left: 5px;
    margin-top: 15px;
    position: absolute;
    font-size: 18px;
    color: #4E4E4E;
    font-family: PingFangSC-Medium;
    /*background-color: deeppink;*/
}
#middle #perCapitaSteelProducing{
    width: 803px;
    height: 275px;
}

#middle #perCapitaSteelProducing #capChart{
    width: 803px;
    height: 275px;
    margin-top: 30px;
    position: absolute;



}
#middle #costStatistics{
    width: 803px;
    height: 414px;
}
#middle #costStatistics .costCumulative{
    width: 80px;
    height: 20px;
    color: #4E4E40;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    margin-top: 21px;
    float: right;
}
/*#middle #costStatistics #costTable{*/
/*    width: 805px;*/
/*    height:300px;*/
/*}*/
#middle #costStatistics #costTable table{
    width: 805px;
    text-align: center;
    /*padding-top: 77px;*/
    font-family: PingFangSC-Light;
    color: #212121;
    font-size: 16px;
    background-color: #FFFFFF;
    margin-top: 59px;
    position: absolute;


}
#middle #costStatistics #costTable table tr{
    width: 805px;
    height: 40px;

}
#middle #costStatistics #costTable table tr td{
    width: 89px;
    border-right:1px solid #DADADA;
    font-size: 16px;
}
#middle #costStatistics .trOdd{background-color:#F6F8FF}

#right{
    width: 505px;
    height: 1310px;
    /*background-color: rosybrown;*/
    margin-left: 1387px;
    position: absolute;
}
#right #structure,#training{
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(4,34,62,0.20);
    /*background-color: violet;*/
    margin-top: 20px;
}
#right #structure{
    width: 505px;
    height: 805px;
}
#right #structure #strTitle{
    text-align: center;
    padding-top: 13px;
    color: #4E4E4E ;
    font-size: 18px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
}
#right #structure .recordText,.ageText,.skillsText{
    margin-left: 28px;
    margin-top: 17px;
    position: absolute;
    font-size: 18px;
    color: #4E4E4E;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    /*background-color: deeppink;*/
}
#right #structure #recordOfFormalSchooling{
    width: 505px;
    height: 255px;
    /*background-color: cyan;*/
}

#right #structure #recordOfFormalSchooling #recSelectGroup .recSelectOne{
    width: 138px;
    height: 20px;
    margin-top: 17px;
    position: absolute;
    float: left;
    margin-left: 215px;


}
#right #structure #recordOfFormalSchooling #recSelectGroup .recSelectOne text{
    font-family: PingFangSC-Regula;
    color: #000000;
    font-size: 14px;

}
#right #structure #recordOfFormalSchooling #recSelectGroup select{
    width: 77px;
    border-radius: 4px;
    background-color: #F6F8FF;
    border: none;

}
#right #structure #recordOfFormalSchooling #recSelectGroup .recSelectTwo{
    width: 138px;
    height: 20px;
    margin-top: 17px;
    position: absolute;
    float: left;
    font-size: 14px;
    margin-left: 358px;
}
#right #structure #recordOfFormalSchooling #recChart{
    width: 505px;
    height:166px;
    margin-left: -135px;
    margin-top: 59px;
    position: absolute;
}


#right #structure #age{
    width: 505px;
    height: 256px;
    /*background-color: coral;*/
}
#right #structure #age .ageAvg{
    width: 85px;
    height: 17px;
    color: #212121;
    font-family:PingFangSC-Light;
    font-size: 12px;
    margin-left:400px;
    margin-top: 21px;
    position: absolute;
}
#right #structure #age #ageChart{
    width: 505px;
    height:255px;
    margin-left: 18px;
    position: absolute;

}
#right #structure #skills{
    width: 505px;
    height: 256px;
    /*background-color: cornflowerblue;*/
}
#right #structure #skills #skillsTable{
    width: 502px;
    height:160px;
    margin-top: 87px;
    position: absolute;
}
#right #structure #skills table{
    width: 502px;
    height:80px;
    text-align: center;
    /*padding-top: 77px;*/
    font-family: PingFangSC-Regular;
    color: #4E4E4E;
    background-color: #FFFFFF;

}
#right #training{
    width: 502px;
    height: 414px;
}
#right #training #traChart{
    width: 503px;
    height: 303px;

    position: absolute;
}
#right #training .traProgress{
    color: #4E4E4E;
    font-size: 14px;
    margin-left: 201px;
    margin-top: 300px;
    position: absolute;
}
#right #training .progress{
   width:368px;
    height: 35px;
    background-color: #CCCBCB;
    filter:alpha(opacity=30);
    opacity: 0.3;
    margin-top: 343px;
    position: absolute;
    margin-left: 68px;
}
#right #training .progress .progress-bar{
    width: 45%;
    font-size:16px;
    padding-top: 8px;
    background: linear-gradient(to right, #A6AAFF 100%,#8AA7FF 100%);


}

